<template>
  <home-block
    class="top-line"
    title="火博头条"
  >
    <img :src="`${$baseImgUrl}home/top-line-left.png`" width="100%"/>
    <div class="content">
      <p class="title">
        <van-icon name="question-o"></van-icon>
        担保问答
      </p>
      <ul class="list">
        <router-link
          v-for="(question, index) in questionList"
          :key="index"
          tag="li"
          :to="'/guarantee/' + question.id"
        >
          > {{question.title}}
        </router-link>
      </ul>
    </div>
    <swiper :options="swiperOpts">
      <swiper-slide
        v-for="(swiper, index) in swiperList"
        :key="index"
      >
        <div
          class="swiper-item"
          :style="swiperItemStyle(swiper.img)"
        >
          <div class="title-wrap">
            <p class="title">{{swiper.title}}</p>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="img-list">
      <van-row :gutter="4">
        <van-col
          :span="8"
          v-for="(img, index) in imgs"
          :key="index"
        >
          <div>
            <span>{{img.title}}</span>
          </div>
        </van-col>
        <van-col :span="8">
          <div>
            <span>更多>>></span>
          </div>
        </van-col>
      </van-row>
    </div>
    <ul class="news-list">
      <router-link
        v-for="(news, index) in newsList"
        :key="index"
        tag="li"
        :to="`/discounts/${news.id}`"
        class="vanlipsis"
      >
        <b>{{index + 1}}.</b>
        <span>{{news.title}}</span>
      </router-link>
    </ul>
  </home-block>
</template>

<script>
import HomeBlock from './HomeBlock.vue';

export default {
  name: 'HomeWarrant',
  props: {
    plat: {
      type: Object,
      default() {
        return {
          company: 0,
          guarantee: 0,
          certification: 0
        };
      }
    },
    questionList: {
      type: Array,
      default() {
        return [
          { url: '', title: '火博网是怎么做担保的?' },
          { url: '', title: '火博网是怎么做担保的?' },
          { url: '', title: '火博网是怎么做担保的?' },
          { url: '', title: '火博网是怎么做担保的?' }
        ];
      }
    },
    swiperList: {
      type: Array,
      default() {
        return [
          { img: '01', title: 'bet365 - 2016欧洲杯 烽火重燃 亿万豪礼惠赠新老会员', url: '' },
          { img: '02', title: '皇冠体育，2016法国欧洲杯指定投注平台', url: '' },
          { img: '03', title: '皇冠现金网 - 亚洲第一体育线上娱乐平台。', url: '' }
        ];
      }
    },
    imgList: {
      type: Array,
      default() {
        return [
          { title: 'bet365', url: '' },
          { title: '皇冠现金网', url: '' },
          { title: '澳门新葡京', url: '' },
          { title: '新加坡金莎娱乐场', url: '' },
          { title: '永利高娱乐场', url: '' },
          { title: 'aaa', url: '' }
        ];
      }
    },
    newsList: {
      type: Array,
      default() {
        return [
          { title: '[皇冠现金网]新人开户送豪礼，首次存款可以申请...', url: '' },
          { title: '[bet365]首存飙至100%，立即注册领取最高8888元...', url: '' },
          { title: '[水晶虎宫殿]拉杆一响，黄金万两，天天送888元彩...', url: '' },
          { title: '[澳门新葡京]百家乐连赢就有礼，路虎揽胜开回家...', url: '' },
          { title: '[永利高娱乐城]天天返水无上限，最高1.2%，至尊...', url: '' },
          { title: '[bet365]体育连赢额外送礼，越战越勇，赶紧来挑...', url: '' },
          { title: '[新加坡金沙娱乐场]神秘惊喜彩金，随机派送，无...', url: '' },
          { title: '[bet365]一周连续签到5天，完成打码，即送5888元...', url: '' },
          { title: '[皇冠现金网]不计算输赢，天天返水，最高2%无上...', url: '' },
          { title: '[VC伟德亚洲]助威法国队，最高加奖128%（2016.5...', url: '' }
        ];
      }
    }
  },
  data() {
    return {
      swiperOpts: {
        height: '170px',
        autoplay: true,
        effect: 'fade',
        pagination: {
          el: '.swiper-pagination'
        }
      }
    };
  },
  components: {
    HomeBlock
  },
  computed: {
    imgs() {
      const MAX_COUNT = 5;
      const len = this.imgList.length > MAX_COUNT ? MAX_COUNT : this.imgList.length;
      return this.imgList.slice(0, len);
    }
  },
  methods: {
    swiperItemStyle(img) {
      return {
        background: `url(${this.$baseImgUrl}home/swiper${img}.png)`,
        backgroundSize: '100%'
      };
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .top-line {
    .content {
      .title {
        position: rvanative;
        margin: 5px 0;
        .van-icon {
          font-size: 1.6rem;
          vertical-align: bottom;
          color: @mainBgColor;
        }
      }
      .list {
        li {
          line-height: 24px;
          padding-left: 10px;
          color: #666;
          cursor: pointer;
          &:hover {
            color: red;
            text-decoration: underline;
          }
        }
      }
    }
    .swiper-container {
      width: 100%;
      height: 170px;
      .swiper-item {
        position: rvanative;
        height: 100%;
        .title-wrap {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 30px;
          line-height: 30px;
          padding-left: 10px;
          font-size: 12px;
          background-color: rgba(0, 0, 0, .5);
          color: #fff;
          .title {
            width: 70%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: vanlipsis;
          }
        }
      }
    }

    .swiper-container /deep/ .swiper-pagination {
      bottom: 5px;
      text-align: right;
    }
    .swiper-container /deep/ .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      border: 1px solid #999;
      border-radius: 0;
      background-color: #666;
      opacity: .8;
    }
    .swiper-container /deep/ .swiper-pagination-bullet-active {
      border: 1px solid red;
      background-color: red;
    }

    .img-list {
      margin-top: .5rem;
      .van-col {
        margin-bottom: 3px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        cursor: pointer;
        &:hover span {
          color: red;
          text-decoration: underline;
        }
        &:last-child div{
          background-color: #318caa;
        }
        div {
          background-color: #0e8b6b;
        }
      }
    }
    .news-list {
      li {
        line-height: 25px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: vanlipsis;
        cursor: pointer;
        &:hover span{
          color: red;
          text-decoration: underline;
        }
        b {
          margin-right: 5px;
          color: #fe6601;
        }
        span {
          color: #666;
        }
      }
    }
  }
</style>
